<template>
<div class="user">
    <div class="common-form">{{$t('plus.add_activity_venue')}}</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item
          :label="$t('plus.activity_title')"
          prop="name"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            type="text"
            v-model="form.name"
            :placeholder="$t('plus.input_activity_title')"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('plus.share_title')"
          prop="shareTitle"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            type="text"
            v-model="form.shareTitle"
            :placeholder="$t('plus.input_share_title')"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('plus.share_content')"
          prop="shareDesc"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            type="text"
            v-model="form.shareDesc"
            :placeholder="$t('plus.input_share_content')"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('plus.background_image')" prop="imageId">
          <el-row>
            <el-button type="primary" @click="openUpload('image')"
              >{{$t('plus.choose_image')}}</el-button
            >
            <div v-if="form.imageId != ''" class="img">
              <img :src="filePath" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('plus.share_image')" prop="shareImageId">
          <el-row>
            <el-button type="primary" @click="openUpload('share')"
              >{{$t('plus.choose_image')}}</el-button
            >
            <div v-if="form.shareImageId != ''" class="img">
              <img :src="shareFilePath" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item
          :label="$t('plus.activity_date')"
          prop="value1"
          :rules="[{  required: true,  message: ' '}]"
        >
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="form.value1"
              type="datetimerange"
              value-format="YYYY-MM-DD"
              :range-separator="$t('plus.to')"
              :start-placeholder="$t('plus.start_date')"
              :end-placeholder="$t('plus.end_date')"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item :label="$t('plus.profile_status')">
          <div>
            <el-radio v-model="form.isShow" :label="1">{{$t('plus.show')}}</el-radio>
            <el-radio v-model="form.isShow" :label="0">{{$t('plus.hide')}}</el-radio>
          </div>
        </el-form-item>
        <div class="common-form">{{$t('plus.invite_success_condition')}}</div>
        <el-form-item :label="$t('plus.invite_success_condition')">
          <el-radio v-model="form.invCondition" label="0"
            >{{$t('plus.invite_to_member')}}</el-radio
          >
          <el-radio v-model="form.invCondition" label="1"
            >{{$t('plus.invite_and_purchase')}}</el-radio
          >
        </el-form-item>
        <div class="common-form">{{$t('plus.gift_config')}}</div>
        <div
          v-for="(item, reward_index) in rewardData"
          :key="reward_index"
          class="mt16"
        >
          <div>
            <span style="font-weight: 900">{{$t('plus.prize_label',{place1:reward_index + 1})}}</span>
            <span>{{$t('plus.every_invite')}}</span>
            <el-input
              type="number"
              v-model="item.invitationNum"
              size="mini"
              style="width: 100px"
            ></el-input>
            <span>{{$t('plus.people_get_gift')}}</span>
            <el-checkbox v-model="item.isBalance" class="pl16"
              >{{$t('plus.balance')}}</el-checkbox
            >
            <el-input
              type="number"
              v-model="item.balance"
              size="mini"
              style="width: 100px"
            ></el-input>
            <el-checkbox v-model="item.isPoint" class="pl16">{{$t('plus.gift_point')}}</el-checkbox>
            <el-input
              type="number"
              v-model="item.point"
              size="mini"
              style="width: 100px"
            ></el-input>
            <el-checkbox v-model="item.isCoupon" class="pl16"
              >{{$t('plus.coupon')}}</el-checkbox
            >
            <el-input
              type="text"
              v-model="item.couponName"
              disabled="true"
              size="mini"
              style="width: 200px"
            >
            </el-input>
            <el-button
              type="primary"
              size="mini"
              @click="addCoupon(reward_index)"
              >{{$t('plus.select_coupon')}}</el-button
            >
            <el-link
              type="primary"
              @click="delReward(reward_index)"
              style="float: right"
              >{{$t('plus.delete')}}</el-link
            >
          </div>
        </div>
        <div style="padding: 10px 20px 20px 40px">
          <el-link type="primary" @click="addInv">{{$t('plus.add_reward_item')}}</el-link>
        </div>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">{{$t('plus.back')}}</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >{{$t('plus.submit')}}</el-button
        >
      </div>
    </div>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >{{$t('plus.upload_image_button')}}</Upload
    >
    <!--选择优惠券-->
    <GetCoupon
      v-if="open_add"
      :open_add="open_add"
      @closeDialog="closeProductDialogFunc($event)"
      >{{$t('plus.select_coupon_popup')}}</GetCoupon
    >
  </div>
</template>

<script>
import InvitationGiftApi from "@/api/invitationgift.js";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*选择优惠券件*/
    GetCoupon,
    Upload
  },
  data() {
    return {
      form: {
        name: "",
        invCondition: "0",
        value1: [],
        imageId: "",
        isShow: 1,
        shareImageId: "",
        shareTitle: "",
        shareDesc: ""
      },
      /*优惠券*/
      tableData: [],
      loading: false,
      open_add: false,
      /*奖励列表*/
      rewardData: [{
        invitationNum: 1,
        isCoupon: false,
        point: 0,
        isPoint: false,
        couponIds: "",
        couponName: "",
        isBalance: false,
        balance: ""
      }],
      coupon_index: 0,
      /*是否打开图片选择*/
      isupload: false,
      formRules: {
        imageId: [{
          required: true,
          message: $t("plus.upload_bg"),
          trigger: "blur"
        }],
        shareImageId: [{
          required: true,
          message: $t("plus.upload_share_image"),
          trigger: "blur"
        }]
      }
    };
  },
  created() {},
  methods: {
    /*添加奖励*/
    addInv() {
      let obj = {
        invitationNum: 1,
        isCoupon: false,
        point: 0,
        isPoint: false,
        couponIds: "",
        couponName: "",
        isBalance: false,
        balance: ""
      };
      this.rewardData.push(obj);
    },
    /*添加优惠券*/
    addCoupon(reward_index) {
      this.open_add = true;
      this.coupon_index = reward_index;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      let index = self.coupon_index;
      self.open_add = e.openDialog;
      let n = self.rewardData[index].couponName.indexOf(e.params.name);
      if (n == -1) {
        self.rewardData[index].couponIds += e.params.couponId + ",";
        if (self.rewardData[index].couponName == "") {
          self.rewardData[index].couponName += e.params.name;
        } else {
          self.rewardData[index].couponName += "," + e.params.name;
        }
      } else {
        ElMessage.error($t("plus.do_not_repeat"));
      }
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      if (self.rewardData.length == 0) {
        ElMessage.error($t("plus.add_prize"));
        return;
      }
      let form = self.form;
      form.reward = self.rewardData;
      form.startTime = self.form.value1[0];
      form.endTime = self.form.value1[1];
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          InvitationGiftApi.addInvitation(form, true).then(data => {
            self.loading = false;
            if (data.code == 1) {
              ElMessage({
                message: data.msg,
                type: "success"
              });
              self.$router.push("/plus/invitation/index");
            } else {
              self.loading = false;
            }
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == "image") {
          this.filePath = e[0].filePath;
          this.form.imageId = e[0].fileId;
        } else if (this.type == "share") {
          this.shareFilePath = e[0].filePath;
          this.form.shareImageId = e[0].fileId;
        }
      }
      this.isupload = false;
    },
    /*返回上一页面*/
    gotoBack() {
      this.$router.back(-1);
    },
    delReward(index) {
      this.rewardData.splice(index, 1);
    }
  }
};
</script>

<style>
.reward_box {
  border: 1px solid #409eff;
  border-radius: 10px;
  padding: 20px;
}
</style>

